<template>
    <div class="me">
        <div class="headInfo">
            <div class="head-img"></div>
            <div class="head-profile">
                <p class="user-id" v-if="userInfo">{{userInfo._id}}</p>
                <p v-else class="user-id" @click="handleLogin">登录/注册</p>
                <p class="user-phone">
                    <i class="fa fa-mobile"></i>
                    <span v-if="userInfo">{{encryptPhone(userInfo.phone)}}</span>
                    <span v-else>登录后享受更多特权</span>
                </p>
            </div>
            <i class="fa fa-angle-right"></i>
        </div>
        <div v-if="userInfo">
            <div class="address-cell">
                <i class="fa fa-map-marker"></i>
                <div class="address-index" @click="myAddress">
                    <span>我的地址</span>
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
            <button @click="handleLogout" class="loginOut-btn">退出登录</button>
        </div>
    </div>
</template>

<script>
import MyAddress from "./Orders/MyAddress";
export default {
    name: "me",
    data() {
        return {
            userInfo: ""
        };
    },
    methods: {
        handleLogin() {
            this.$router.push("/login");
        },
        async getData() {
            try {
                const user_id = localStorage.ele_login;
                const res = await this.$axios.get(
                    `/api/user/user_info/${user_id}`
                );
                // console.log(res.data);
                this.userInfo = res.data;
            } catch (err) {
                console.log(err);
            }
        },
        encryptPhone(phone) {
            return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
        },
        handleLogout() {
            localStorage.removeItem("ele_login");
            this.$router.push("/login");
        },
        myAddress() {
            if (this.userInfo.myAddress.length > 0) {
                this.$router.push("/myAddress");
            } else {
                this.$router.push({
                    name: "AddAddress",
                    params: {
                        title: "添加地址",
                        addressInfo: {
                            name: "",
                            sex: "",
                            phone: "",
                            address: "",
                            bottom: "",
                            tag: ""
                        }
                    }
                });
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => vm.getData());
    },
    components: {
        MyAddress
    }
};
</script>

<style scoped>
.me {
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
}
.headInfo {
    display: flex;
    background-image: linear-gradient(90deg, #0af, #0085ff);
    padding: 6.666667vw 4vw;
    color: #fff;
    align-items: center;
}
.head-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-position: 0px 0px;
    background-size: 60px;
    background-image: url(https://shadow.elemecdn.com/faas/h5/static/sprite.3ffb5d8.png);
}
.head-profile {
    overflow: hidden;
    margin-left: 4.8vw;
    flex-grow: 1;
}
.head-profile .user-id {
    max-width: 40vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.3rem;
    margin-bottom: 2.133333vw;
    font-weight: 700;
    display: flex;
    align-items: center;
}
.head-profile .user-phone {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
}
.user-phone > i {
    margin-right: 0.666667vw;
    font-size: 1rem;
}
.headInfo > i {
    font-size: 1.2rem;
}

.address-cell {
    margin-top: 2.666667vw;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: 1rem;
    line-height: 4.533333vw;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding-left: 6.666667vw;
    color: #333;
}
.address-cell > i {
    font-size: 1.3rem;
    color: rgb(74, 165, 240);
    margin-right: 2.666667vw;
}
.address-index {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 3.733333vw 2.666667vw 3.733333vw 0;
    align-content: center;
}
.address-index > i {
    font-size: 1.3rem;
    color: #ccc;
}
.loginOut-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 3.733333vw 0;
    margin: 5.333333vw 0;
    color: #ff5339;
    border-radius: 0.8vw;
    font-size: 1rem;
    font-weight: 700;
    background-color: #fff;
    border: 0;
}
</style>